<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            条件渲染有两种方式：
                1.v-show
                    1.v-show是通过display:none来实现的元素不显示，实际dom元素还存在页面中
                2.v-if
                    1.v-if则直接不加载不符合条件的元素dom节点
                    2.v-if可以搭配 v-else-if 和 v-else 使用，但是配合使用的时候，元素不可被打断
                      比如两个div使用 v-if 和 v-else ，那么这两个div中间不能存在其他节电，否则就不认为是同一个条件判断
            使用建议：
                1.页面元素经常被修改可见或者不可见的时候使用 v-show 
                2.页面元素不经常修改可见性的时候使用 v-if
                这种使用方式是考虑加载、删除dom节点的资源消耗
            扩展：
                1.因为v-if层级关系必须明确，并且不止一个条件判断时，条件判断不能被中断，所以可以使用template构建层级关系，渲染dom节点时template节点不会被加载
         -->

        <div id="root">
            n：<input v-model="n" type="number" />
            <h1>v-show</h1>
            <h2 v-show="n==1">aaa</h2>
            <h2 v-show="n==2">bbb</h2>
            <h2 v-show="n==3">ccc</h2>
            <hr />
            <h1>v-if</h1>
            <h2 v-if="n==1">aaa</h2>
            <h2 v-if="n==2">bbb</h2>
            <h2 v-if="n==3">ccc</h2>
            <hr />
            <h1>template</h1>
            <template v-if="n==1">
                <h2>aaa</h2>
            </template>
            <template v-else-if="n==2">
                <h2>bbb</h2>
            </template>
            <template v-else>
                <h2>ccc</h2>
            </template>
        </div>

        <script>
            const vm = new Vue({
                data() {
                    return {
                        n: 1,
                    };
                },
            });

            vm.$mount("#root");
        </script>
    </body>
</html>
